﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/area_echarts.js"></script>
<link rel="stylesheet" href="css/comon0.css">
<link rel="stylesheet" href="css/total.css">
</head>
	<script>	
		$(document).ready(function(){
			var whei=$(window).width()
			$("html").css({fontSize:whei/20})
			$(window).resize(function(){
				var whei=$(window).width()
			 $("html").css({fontSize:whei/20})
		});
		});
	</script>
	<script type="text/javascript" src="js/echarts.min.js"></script> 
	<script>
		
	</script>
<body>
	<div class="loading" >
  	<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
	</div>
<div class="canvas" style="opacity: .3">
	<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="head">

  <h1>综合展示大屏</h1>
  <div class="weather"><img src="images/weather.png"><span>多云转小雨</span><span id="showTime"></span></div>
	<script>
var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
</div>
<div class="mainbox">
  	<ul class="clearfix">
    <li>
		<!-- 总计 -->
		<div class="boxall" style="height: 2.39rem">
		  	<div class="alltitle">卸土数总览</div>
		 	<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">74</h2>
						<span style="color: greenyellow">卸土车次</span>
					</li>
					<li>
						<h2 style="color: red">8</h2>
						<span style="color: red">卸土警告</span>
					</li>
					<li>
						<h2 style="color: greenyellow">246</h2>
						<span style="color: green">人员进出</span>
					</li>
					<li>
						<h2 style="color: red">11</h2>
						<span style="color: red">人员报警</span>
					</li>
				</ul>
        	</div>
        	<div class="boxfoot"></div>
      	</div>
		<!-- A区统计 -->
      	<div class="boxall">
			<div class="alltitle alltitle2">工地一</div>
			<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">15</h2>
						<span style="color: greenyellow">卸土车次</span>
					</li>
					<li>
						<h2 style="color: red">2</h2>
						<span style="color: red">卸土警告</span>
					</li>
					<li>
						<h2 style="color: green">102</h2>
						<span style="color: greenyellow">人员进出</span>
					</li>
					<li>
						<h2 style="color: red">3</h2>
						<span style="color: red">人员警告</span>
					</li>
				</ul>
			</div>	
			<div class="boxfoot"></div>
      	</div>
		<!-- B区统计 -->
	  	<div class="boxall">
        	<div class="alltitle alltitle2">工地二</div>
			<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">25</h2>
						<span style="color: greenyellow">卸土车次</span>
					</li>
					<li>
						<h2 style="color: red">4</h2>
						<span style="color: red">卸土警告</span>
					</li>
					<li>
						<h2 style="color: green">89</h2>
						<span style="color: greenyellow">人员进出</span>
					</li>
					<li>
						<h2 style="color: red">5</h2>
						<span style="color: red">人员警告</span>
					</li>
				</ul>
			</div>											
        	<div class="boxfoot"></div>
      	</div>
		<!-- C区统计 -->
	  	<div class="boxall">
        	<div class="alltitle alltitle2">工地三</div>
			<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">34</h2>
						<span style="color: greenyellow">卸土车次</span>
					</li>
					<li>
						<h2 style="color: red">2</h2>
						<span style="color: red">卸土警告</span>
					</li>
					<li>
						<h2 style="color: green">55</h2>
						<span style="color: greenyellow">人员进出</span>
					</li>
					<li>
						<h2 style="color: red">3</h2>
						<span style="color: red">人员警告</span>
					</li>
				</ul>
			</div>	
			<div class="boxfoot"></div>
      	</div>
		
    </li>
	<!-- 中间区域 -->
    <li>
      	<div class="map">
			<div class="map1"><img src="images/lbx.png"></div>
			<div class="map2"><img src="images/jt.png"></div>
			<div class="map3"><img src="images/map.png"></div>
			<div class="map4" id="map_1">
		</div>
      </div>
		<div class="boxall">
			<div class="alltitle">卸土数统计</div>
			<div class="allnav" style="height: 2rem; " id="echart4">
			</div>
			<div class="boxfoot"></div>
		</div>
    </li>
	<!-- 右侧区域 -->
    <li> 
      	<div class="boxall">  
			<div class="alltitle ">工地一 </div>
			<div class="allnav left2_table" id="gongdi1" style="height: 2.2rem ">
				<ul>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A17J18</div>
							<div><img width="80" src="images/carLicensePlate/甘A17J18.jpg" /></div>
							<div>5次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A17J18</div>
							<div><img width="80" src="images/carLicensePlate/甘A17J18 (1).jpg" /></div>
							<div>6次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A17M35</div>
							<div><img width="80" src="images/carLicensePlate/甘A17M35.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A076A6</div>
							<div><img width="80" src="images/carLicensePlate/甘A076A6.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A76L77</div>
							<div><img width="80" src="images/carLicensePlate/甘A76L77.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A096R2</div>
							<div><img width="80" src="images/carLicensePlate/甘A096R2.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A497D9</div>
							<div><img width="80" src="images/carLicensePlate/甘A497D9.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="boxfoot"></div>
      	</div>	
		<div class="boxall">
			<div class="alltitle alltitle2">工地二</div>
			<div class="allnav left2_table" id="gongdi2" style="height: 2.2rem ">
				<ul>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A09B12</div>
							<div><img width="80" src="images/carLicensePlate/琼A180Q8.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A9T528</div>
							<div><img width="80" src="images/carLicensePlate/甘A9T528.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A17J18</div>
							<div><img width="80" src="images/carLicensePlate/甘A17J18.jpg" /></div>
							<div>5次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A17J18</div>
							<div><img width="80" src="images/carLicensePlate/甘A17J18 (1).jpg" /></div>
							<div>6次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A17M35</div>
							<div><img width="80" src="images/carLicensePlate/甘A17M35.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A076A6</div>
							<div><img width="80" src="images/carLicensePlate/甘A076A6.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A76L77</div>
							<div><img width="80" src="images/carLicensePlate/甘A76L77.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="boxfoot"></div>
		</div>
      	<div class="boxall" style="height: 2.6rem;">
        	<div class="alltitle">工地三 </div>
			<div class="allnav left2_table" id="gongdi3">
				<ul>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A17M35</div>
							<div><img width="80" src="images/carLicensePlate/甘A17M35.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A076A6</div>
							<div><img width="80" src="images/carLicensePlate/甘A076A6.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A76L77</div>
							<div><img width="80" src="images/carLicensePlate/甘A76L77.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>甘A096R2</div>
							<div><img width="80" src="images/carLicensePlate/甘A096R2.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>甘A497D9</div>
							<div><img width="80" src="images/carLicensePlate/甘A497D9.jpg" /></div>
							<div>4次</div>
						</div>
					</li>
				</ul>
			</div>
        	<div class="boxfoot"></div>
      	</div>
    </li>
  </ul>
</div>
<div class="back"></div>
	    

		

<script language="JavaScript" src="js/js.js"></script> 
<script src="js/jquery.liMarquee.js"></script> 	
<script type="text/javascript" src="js/init.js"></script>
<script>
	$(function(){
		$('.scrollDiv').liMarquee({
			direction: 'up',
			scrollamount: 30,
			runshort: false
		});
	});
</script> 
</body>
</html>
